<template>
  <dl class="aside-box">
    <dt>组织机构</dt>
    <dd v-for="item in listData" :key="item.t_plant_pk" :class="classObj(item)">
      <router-link :to="getUrl(item)">
        {{ item.plant_name }}
      </router-link>
    </dd>
  </dl>
</template>

<script>
import ajax from "@/util/request";

export default {
  props: {
    modelValue: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      baseData: [
        { plant_name: "二级学院", t_plant_pk: 2 },
        { plant_name: "党群部门", t_plant_pk: 3 },
        { plant_name: "行政部门", t_plant_pk: 4 },
      ],
      listData: [],
    };
  },
  methods: {
    classObj(item) {
      if (this.baseData.some((v) => v.plant_name == item.plant_name)) {
        return {
          actived: item.t_plant_pk == this.$route.params.t_cat_pk,
        }
      } else {
        return {
          actived: item.t_plant_pk == this.$route.params.t_plant_pk,
        }
      }
    },
    getUrl(item) {
      if (this.baseData.some((v) => v.plant_name == item.plant_name)) {
        // 修改一下路由参数对应
        return {
          name: "nav-right",
          params: { cat_name: item.plant_name, t_cat_pk: item.t_plant_pk },
        };
      } else {
        return this.getListUrl(this.$route.params, item);
      }
    },
  },
  watch: {
    // 路由参数变化后，会传入过来
    modelValue: {
      immediate: true,
      handler(newVal) {
        if (!newVal) {
          return;
        }
        if (this.baseData.some((v) => v.plant_name == newVal.cat_name)) {
          this.listData = this.baseData;
        } else {
          ajax("/plant/queryList", { t_cat_pk: newVal.t_cat_pk }).then(
            ({ data }) => {
              if (data.status > 0) {
                this.listData = data.result_data;
              }
            }
          );
        }
      },
    },
  },
};
</script>

<style scoped>
.aside-box {
  margin-right: 15px;
}

.aside-box > dt {
  width: 260px;
  height: 70px;
  font-size: 130%;
  font-weight: 700;
  color: #fff;
  background-color: var(--base-color);
  border: 1px solid var(--base-color);
  text-align: center;
  line-height: 70px;
  border-radius: 5px;
}

.aside-box > dd {
  width: 260px;
  height: 70px;
  font-size: 120%;
  font-weight: 500;
  background-color: var(--base-color);
  border: 1px solid var(--base-color);
  text-align: center;
  line-height: 70px;
  border-radius: 5px;
  margin-top: 10px;
}

.aside-box > .actived {
  background-color: #dcedff;
}

.aside-box > dd > a {
  color: #fff;
  display: block;
  height: 100%;
}

.aside-box > .actived > a {
  color: var(--base-color);
}
</style>